<template>
  <div>
    姓<input type="text" v-model="firstName">
    名<input type="text" v-model="lastName">
    
    <h2>{{ fullName }}</h2>
    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            firstName:'小野',
            lastName:'太郎'
        }
    },
    methods:{
        changeName(){
            console.log(111)
            this.fullName = '罗广-太君'
        }
    },
  computed: {
    // 如果要修改计算属性
    // fullName () {
    //   return this.firstName + '-' + this.lastName
    // },
    fullName:{
        // getter函数 --> 当我们读取fullName的时候
        get(){
            return this.firstName + '-' + this.lastName
        },
        set(newVal){
            // 还是要修改它的依赖，才能
            console.log(newVal)
            // 字符串转数组 
            const arr = newVal.split('-')

            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
  }
}
</script>

<style>

</style>